/**
 * 折线图
 */
export default {
  name: "lineBarEchart",
  props: ["params"],
  data: function () {
    return ({
      width: 100,
      height: 100,
      echartId: 'canvas-' + parseInt(new Date().getTime() * Math.random())
    });
  },
  mounted: function () {
    let _this = this;
    let width = document.getElementById(_this.echartId).parentNode.offsetWidth;
    let height = document.getElementById(_this.echartId).parentNode.offsetHeight;
    _this.width = parseFloat(width);
    _this.height = parseFloat(height);
    setTimeout(function () {
      _this.drawEchartsFunc();
    },0);
  },
  methods: {
    set0ptions: function (tmpParams) {
      let _this = this;
      let params = tmpParams;
      let series = [], xData =[];
      for(let xLengtth=0;xLengtth<tmpParams.xData.length;xLengtth++){
        xData.push({
          value:tmpParams.xData[xLengtth],
          textStyle: {
            fontSize:18
          }
        })
      }
      let hasDataZoom = false;//是否有滚动条
      for (let pLength = 0; pLength < tmpParams.yData.length; pLength++) {
        let item;
        if (tmpParams.yData[pLength].type == "line") {
          item = {
            type: 'line',
            smooth: true,
            zlevel: pLength,
            itemStyle: {//拐点的样式
              borderColor: "#fff",
              borderWidth: 7
            },
            lineStyle: {
              width: 6,
              type: "solid"
            },
            data: tmpParams.yData[pLength].data
          }
        } else {
          item = {
            type: 'bar',
            barWidth: '50%',
            itemStyle: {
              normal: {
                color: function (params) {
                  let colorList = ['#363f22'];
                  return colorList[0]
                },
                label: {
                  show: true,
                  color: "#fff",//控制柱形图里面的颜色
                  position: 'insideBottom',
                  formatter: '{c}',
                  textStyle:{
                    fontSize: 22,
                  }
                }
              }
            },
            data: tmpParams.yData[pLength].data
          };
        }
        if (tmpParams.yData[pLength].data.length > 10) {
          hasDataZoom = true;
        }
        series.push(item)
      }
      let option = {
        color: ['#eb7931'],
        tooltip: {
          trigger: 'axis',
          textStyle: {
            fontSize: 22
          },
          formatter: function (data) {//数据格式
          }
        },
        grid: {
          left: '0%',
          right: '4%',
          bottom: hasDataZoom?'26%':"5%",
          top: "5%",
          containLabel: true,
          show: false,//去除外层网格线
          backgroundColor: "#ffffff",
          tooltip: {
            trigger: "none"
          }
        },
        xAxis: [{
          show: true,
          type: 'category',
          axisPointer: {
            triggerTooltip: false
          },
          axisLine: {
            lineStyle: {
              type: 'solid',
              color: '#123b80',//坐标轴的样式
              width: '1'
            }
          },
          boundaryGap: ['20%', '20%'],
          axisTick: {
            show: false,
            alignWithLabel: true
          },
          axisLabel: {
            color: "#eee"
          },
          splitLine: {
            show: true,//添加x坐标网格线
            lineStyle: {
              color: '#123b80',//坐标轴的样式
              type: "dashed"
            }
          },//展示虚线网格线
          data: xData
        }],
        yAxis: {
          show: true,
          type: 'value',
          axisLabel: {
            color: "#fff",
            textStyle: {
              fontSize: 22
            }
          },
          axisLine: {
            lineStyle: {
              type: 'solid',
              color: '#123b80',//坐标轴的样式
              width: '1'
            }
          },
          axisTick: {
            show: false,
            alignWithLabel: true
          },
          splitLine: {
            show: true,//添加要y坐标网格线
            lineStyle: {
              color: '#123b80',//坐标轴的样式
              type: "dashed"
            }
          },//展示虚线网格线
        },
        series: series
      };
      if (hasDataZoom) {
        option.dataZoom = [
          {//这个是鼠标拖动
            show: true,
            borderColor: "#123b80",//边框颜色
            start: 0,
            end: hasDataZoom?30:100,
            minSpan: 20,
            filterMode: "empty",
          },
          {//这个是鼠标缩放事件
            type: 'inside',
            borderColor: "#123b80",//边框颜色
            start: 94,
            end: 100,
            minSpan: 10,
            filterMode: "empty",
          }
        ];
      }
      return option;
    },
    drawEchartsFunc: function () {
      let _this = this;
      let params = _this.params;
      let option = _this.set0ptions(params);
      let echartsId = document.getElementById(_this.echartId);
      let myEcharts = _this.$echarts.init(echartsId);
      myEcharts.setOption(option);
    }
  }
}
